<template>
  <div class="form-container" v-loading="loading">
    <div class="top">
      <el-cascader size="mini" v-model="value" :options="options" :props="props" collapse-tags clearable></el-cascader>
    </div>
    <div class="bottom">
      <el-divider></el-divider>
      <div class="line">
        <el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
        <el-button size="mini" @click="onCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { apiSignZoneSelect, apiVipZoneSet } from '@/api/assetsDisposal'

export default {
  props: {
    default: Array,
    userId: String,
  },
  data() {
    return {
      loading: false,
      props: { multiple: true, value: 'code', label: 'name' },
      value: [],
      options: [],
    }
  },
  watch: {},
  computed: {},
  mounted() {
    this.getOptions()
  },
  methods: {
    // 获取选项
    getOptions() {
      const info = {
        user_id: this.userId,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiSignZoneSelect(formData).then((res) => {
        if (res.code !== 200) {
          return
        }
        res.data.forEach((item1) => {
          if (item1.children && item1.children.length === 0) {
            delete item1.children
          } else {
            item1.children.forEach((item2) => {
              if (item2.children && item2.children.length === 0) {
                delete item2.children
              }
            })
          }
        })
        this.options = res.data
        this.setDefault()
      })
    },
    // 初始化默认值
    setDefault() {
      const list = []
      // 先把zoneListShow转化成zoneList
      const zoneList = []
      this.default.forEach((item) => {
        const zone = item.zone_name.split(' ')
        const tempZone = []
        zone.forEach((item2, index) => {
          if (index === 0) {
            tempZone.push(
              this.options.find((option) => {
                return option.name === item2
              })
            )
          } else {
            tempZone.push(
              tempZone[index - 1].children.find((option) => {
                return option.name === item2
              })
            )
          }
        })
        zoneList.push(tempZone)
      })

      zoneList.forEach((item) => {
        const length = item.length
        const temp = []
        item.forEach((item2) => {
          temp.push(item2.code)
        })
        const current = item[length - 1]
        if (current.children) {
          // 如果有子级
          current.children.forEach((item2) => {
            if (item2.children) {
              item2.children.forEach((item3) => {
                list.push([...temp, item2.code, item3.code])
              })
            } else {
              list.push([...temp, item2.code])
            }
          })
        } else {
          // 如果没有就是自己
          list.push(temp)
        }
      })
      this.value = list
    },
    // 确定
    onSubmit() {
      // 初始化
      const zoneList = []
      this.options.forEach((item1) => {
        item1.selected = false
        if (item1.children) {
          item1.children.forEach((item2) => {
            item2.selected = false
            if (item2.children) {
              item2.children.forEach((item3) => {
                item3.selected = false
              })
            }
          })
        }
      })
      // 标记第三级
      this.value.forEach((item) => {
        const length = item.length
        const optionList = []
        item.forEach((item2, i) => {
          if (i === 0) {
            optionList.push(
              this.options.find((option) => {
                return option.code === item2
              })
            )
          } else {
            optionList.push(
              optionList[i - 1].children.find((option) => {
                return option.code === item2
              })
            )
          }
        })
        optionList[length - 1].selected = true
      })
      // 标记第二级
      this.options.forEach((item1) => {
        if (item1.children) {
          item1.children.forEach((item2) => {
            if (item2.children) {
              let allSelected = true
              item2.children.forEach((item3) => {
                if (!item3.selected) {
                  allSelected = false
                }
              })
              if (allSelected) {
                item2.selected = true
              }
            }
          })
        }
      })
      // 标记第一级
      this.options.forEach((item1) => {
        if (item1.children) {
          let allSelected = true
          item1.children.forEach((item2) => {
            if (!item2.selected) {
              allSelected = false
            }
          })
          if (allSelected) {
            item1.selected = true
          }
        }
      })
      // 获取选择数据
      this.options.forEach((item1) => {
        if (item1.selected) {
          zoneList.push([item1])
        } else if (item1.children) {
          item1.children.forEach((item2) => {
            if (item2.selected) {
              zoneList.push([item1, item2])
            } else if (item2.children) {
              item2.children.forEach((item3) => {
                if (item3.selected) {
                  zoneList.push([item1, item2, item3])
                }
              })
            }
          })
        }
      })
      const jsonList = []
      zoneList.forEach((item) => {
        const obj = {}
        if (item[0]) {
          obj.one = item[0].code
        }
        if (item[1]) {
          obj.two = item[1].code
        }
        if (item[2]) {
          obj.three = item[2].code
        }
        jsonList.push(obj)
      })
      const info = {
        user_id: this.userId,
        choice_json: JSON.stringify(jsonList),
        send_to_feijiu: 1,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      // 上传数据
      apiVipZoneSet(formData).then(() => {
        this.$emit('confirm', this.value)
      })
    },
    // 取消
    onCancel() {
      this.$emit('close')
    },
  },
}
</script>
<style lang="scss" scoped>
.form-container {
  padding: 0 16px;
  .top {
    min-height: 300px;
  }
  .bottom {
    .line {
      display: flex;
      justify-content: flex-end;
    }
  }
  .el-cascader {
    width: 100%;
  }
  .el-input {
    width: 100% !important;
  }
}
</style>
